﻿
@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
办公室列表页
@*添加按钮*@
<div>
    <button type="button" id="add" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addOfficeRoom">添加 </button>
</div>

@*表格*@
<table id="officeTable" class="table">
    <thead>
        <tr>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>


@*添加对话框*@
<div class="modal fade" id="addOfficeRoom" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">添加办公室</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">办公室名称:</label>
                        <input type="text" class="form-control" id="officeName">
                        <label for="recipient-name" class="col-form-label">容量:</label>
                        <input type="text" class="form-control" id="capacity">
                        <label for="recipient-name" class="col-form-label">描述:</label>
                        <input type="text" class="form-control" id="description">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="submitAdd">保存</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


@*编辑对话框*@
<div class="modal fade" id="editOfficeRoom" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">编辑办公室</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="recipient-name" class="col-form-label">办公室id:</label>
                        <input type="text" class="form-control" id="newOfficeRoomId">
                        <label for="recipient-name" class="col-form-label">办公室名称:</label>
                        <input type="text" class="form-control" id="newOfficeRoomName">
                        <label for="recipient-name" class="col-form-label">容量:</label>
                        <input type="text" class="form-control" id="newCapacity">
                        <label for="recipient-name" class="col-form-label">人员:</label>
                        <input type="text" class="form-control" id="newDescription">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="submitEdit">保存</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


@*确定删除对话框*@
<div class="modal fade" id="sureDel" tabindex="-1" data-bs-backdrop="static" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">删除办公室</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>确认删除吗?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" id="submitDel">确定</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>


@section Scripts{

    <script>
        loadpage()
        let g_rows
        let user = JSON.parse(sessionStorage.getItem('user'))

        function loadpage() {
            let s = sessionStorage.getItem('officelist')

            if (s == [] || s == "" || s == null) {
                $.ajax({
                    url: '/OfficeRoom/GetOfficeRoomList',
                    type: 'get',
                    success: function (data) {
                        parseData(data)
                    },
                    error: function (err) {
                    }
                })
            } else {
                parseStorage(s)
            }

        }

        //解析请求数据并渲染到页面
        function parseData(data) {
            $('#officeTable thead tr').empty()
            $('#officeTable tbody tr').empty()
            let jsd = JSON.stringify(data)

            let head = JSON.parse(data.attr)
            head.push('操作')
            sessionStorage.setItem('officelist_head', JSON.stringify(head))

            //渲染表头
            for (index in head) {
                $('#officeTable thead tr').append('<th>' + head[index] + '</th>')
            }

            let rows = JSON.parse(data.row)
            g_rows = rows
            sessionStorage.setItem('officelist', JSON.stringify(rows))

            //渲染表格
            $(rows).each(function (index, ele) {
                $('#officeTable tbody').append('<tr></tr>')
                for (key in ele) {
                    $('#officeTable tbody tr:last').append('<td>' + ele[key] + '</>')
                }

                $('#officeTable tbody tr:last').append('<td>' +
                    '<button class="editBtn" onclick="edit(this)" data-bs-toggle="modal" data-bs-target="#editOfficeRoom">编辑</button>' +
                    '<button class="delBtn" onclick="del(this)" data-bs-toggle="modal" data-bs-target="#sureDel">删除</button>' +
                    '</td>')
                $('#officeTable tbody tr td:last').attr({ 'officeid': ele.OfficeRoomId })
            })

            $('.delBtn').addClass("btn btn-danger btn-sm")
            $('.editBtn').addClass("btn btn-primary btn-sm")
        }



        //解析缓存并加载到表格
        function parseStorage(data) {
            $('#officeTable thead tr').empty()
            $('#officeTable tbody tr').empty()
            let headStorage = sessionStorage.getItem('officelist_head')
            let head = JSON.parse(headStorage)
            //渲染表头
            for (index in head) {
                $('#officeTable thead tr').append('<th>' + head[index] + '</th>')
            }

            //渲染表格
            let rows = JSON.parse(data)
            $(rows).each(function (index, ele) {
                $('#officeTable tbody').append('<tr></tr>')
                for (key in ele) {
                    $('#officeTable tbody tr:last').append('<td>' + ele[key] + '</>')
                }
                $('#officeTable tbody tr:last').append('<td>' +
                    '<button class="editBtn" data-bs-toggle="modal" data-bs-target="#editOfficeRoom">编辑</button>' +
                    '<button class="delBtn"  data-bs-toggle="modal" data-bs-target="#sureDel">删除</button>' +
                    '</td>')
                $('#officeTable tbody tr td:last').attr({ 'officeid': ele.OfficeRoomId })
            })

            $('.delBtn').addClass("btn btn-danger btn-sm")
            $('.editBtn').addClass("btn btn-primary btn-sm")
        }


        //刷新数据
        function refreshData() {
            $('#officeTable thead tr').empty()
            $('#officeTable tbody tr').empty()
            $.ajax({
                url: '/OfficeRoom/GetOfficeRoomList',
                type: 'get',
                success: function (data) {
                    parseData(data)
                },
                error: function (err) {
                }
            })
        }


        //添加对话框“保存”按钮响应事件
        $('#submitAdd').click(function () {
            if ($('#officeName').val() == '')
                return


            $.ajax({
                url: '/OfficeRoom/AddOfficeRoom',
                type: "post",
                data: {
                    OfficeRoomName: $('#officeName').val(),
                    Capacity: $('#capacity').val(),
                    Description: $('#description').val(),
                },
                dataType: 'json',
                success: function (data) {
                    if (data == 0 || data == '0') {
                        alert("名称已存在")
                        return
                    }
                    if (data == -1 || data == '-') {
                        alert("名称不能为空")
                        return
                    }
                    if (data == 1 || data == '1') {
                        refreshData()
                    }
                }
            })
        })



        //第一次加载页面--“编辑”按钮响应事件
        function edit(e) {
            let officeRoomId = $(e).parent().attr('officeid')
            let officeRoom = g_rows.filter(function (d) {
                return d.OfficeRoomId == officeRoomId
            })
            $('#newOfficeRoomId').val(officeRoom[0].OfficeRoomId)
            $('#newOfficeRoomId').attr({ 'disabled': 'disabled' })
            $('#newOfficeRoomName').val(officeRoom[0].OfficeRoomName)
            $('#newCapacity').val(officeRoom[0].Capacity)
            $('#newDescription').val(officeRoom[0].Description)
        }

        //使用缓存--“编辑”按钮响应事件
        $('.editBtn').each(function (index) {
            $(this).click(function () {
                let rows = JSON.parse(sessionStorage.getItem('officelist'))
                let officeRoom = rows.filter(function (r, ind) {
                    return index == ind
                })
                $('#newOfficeRoomId').val(officeRoom[0].OfficeRoomId)
                $('#newOfficeRoomId').attr({ 'disabled': 'disabled' })
                $('#newOfficeRoomName').val(officeRoom[0].OfficeRoomName)
                $('#newCapacity').val(officeRoom[0].Capacity)
                $('#newDescription').val(officeRoom[0].Description)
            })
        })

        //编辑对话框中的“保存”按钮点击事件响应
        $('#submitEdit').click(function (index) {
            let OfficeRoomId = $('#newOfficeRoomId').val()
            let OfficeRoomName = $('#newOfficeRoomName').val()
            let Capacity = $('#newCapacity').val()
            let Description = $('#newDescription').val()

            if (OfficeRoomName == '' || Capacity == '') {
                //提示名称不能为空

                return
            }

            $.ajax({
                url: '/OfficeRoom/EditOfficeRoom',
                type: 'post',
                data: {
                    OfficeRoomId,
                    OfficeRoomName,
                    Capacity,
                    Description
                },
                success: function (data) {
                    if (data == 1) {
                        alert("修改成功")
                    }
                    else if (data == 0) {
                        alert('名称已存在!')
                    } else if (data == -1) {
                        alert('名称不能为空!')
                    }
                    //刷新表格
                    refreshData()
                    //关闭对话框
                    // ...
                },
                error: {

                }
            })
        })




        //第一次加载页面--"删除"按钮响应事件
        let officeRoomId
        function del(e) {
            officeRoomId = $(e).parent().attr('officeid')
        }

        //缓存的数据--"删除"按钮点击事件响应
        $('.delBtn').each(function (index) {
            $(this).click(function () {
                let stor = sessionStorage.getItem('officelist')

                let rows = JSON.parse(stor)
                let tr = $(rows).filter(function (ind, ele) {
                    return ind == index
                })
                officeRoomId = tr[0].OfficeRoomId
            })
        })

        //"删除"对话框--"确定"按钮响应事件
        $('#submitDel').click(function () {
            let delId = officeRoomId;
            if (delId <= 0) {
                return
            }

            $.ajax({
                url: '/OfficeRoom/DelOfficeRoom',
                type: 'post',
                data: {
                    OfficeRoomId: delId
                },
                success: function (data) {
                    if (data == 1) {
                        alert("删除成功")
                    }
                    else {
                        alert('删除失败!')
                    }
                    //刷新表格
                    refreshData()
                    //关闭对话框
                    // ...
                },
                error: {

                }
            })
        })

    </script>
}